<template>
<div>
<validator name="validatorError" >
<form>
	<div class="list-group">
		<div class="list-group-item">
		<input type="text" v-validate:name="{required:true}"  placeholder="输入名称" validate-messages="{required:'请输入名称!'}">
		</div>
		<div class="list-group-item">
		<input type="text" v-validate:mobile="{required:true,mobile:true}"  placeholder="输入手机号码" validate-messages="{required:'请输入手机号码!',mobile:'不是有效的手机号码!'}">
		</div>
		<div class="list-group-item">
			<select v-validate:idcards="{required:true}" validate-messages="{required:'请选择证件类型!'}" style="display:block;width:100%;">
			<option value="">请选择</option>
			<option value="1">身份证</option>
			<option value="2">军官证</option>
			<option value="3">台胞证</option>
			</select>
		</div>
	</div>
	<br/>
	<div class="list-group" v-validate:city="{required:true}" validate-messages="{required:'请至少选择一个城市项!'}" validate-handler="false">
		<div class="list-group-item">
			<radio-group :options="radioList"  @changed="changeRadio" class-name="vue-radio-group horizontal"></radio-group>
		</div>
	</div>
	<br/>

	<div  class="list-group" v-validate:citysecond="{required:true}" validate-handler="false" validate-messages="{required:'请至少选择两个城市项!'}">
		<div class="list-group-item">
			<check-box-group :options="checkboxList"  @changed="onCheckboxChanged" class-name="vue-checkbox-group horizontal"></check-box-group>
		</div>
	</div>
	<br/>
	<div class="list-group">
		<div class="list-group-item">
			校验结果：{{isValid}}
		</div>
	</div>
	<div class="ptb-15 plr-15">
		<button type="button" class="vue-btn  vue-btn-green block" @click="validForm">提交</button>
	</div>
</form>
</validator>
<message-alert
:visible="visible"
:title="title"
:content="content"
@ok="close"
></message-alert>
</div>
</template>

<script>
import Vue from "vue"
import Validator from "../../directives/form/validator"
import radioGroup from "components/radio/radioGroup"
import checkBoxGroup from "components/checkbox/checkboxGroup"
import MessageAlert from "components/message/alert"

Vue.use(Validator);

export default{
	components:{
		MessageAlert,radioGroup,checkBoxGroup
	},
	data(){
		return{
			validator:null,
			isValid:"",
 			visible:false,
 			title:"提示",
 			content:"",
 			radioList:[
	 			{
	 				value:"1",
	 				name:"city1",
	 				text:"上海"
	 			},
	 			{
	 				value:"2",
	 				name:"city1",
	 				text:"北京"
	 			},
	 			{
	 				value:"3",
	 				name:"city1",
	 				disabled:"disabled",
	 				text:"深圳"
	 			}
	 		],
	 		checkboxList:[
	 			{
	 				value:"1",
	 				text:"上海"
	 			},
	 			{
	 				value:"2",
	 				text:"北京"
	 			},
	 			{
	 				value:"3",
	 				disabled:"disabled",
	 				text:"深圳"
	 			}
	 		]
		}
 	},
 	methods:{
 		close(){
 			this.visible=false;
 		},	
 		changeRadio(item){
 			this.$validatorError.city.invalid=true;
 			if(item!=""){
				this.$validatorError.city.error=false;
 			}
 			else{
 				this.$validatorError.city.error=true;
 			}
 		},
 		onCheckboxChanged:function(item){
			this.$validatorError.citysecond.invalid=true;
			if(item.length>1){
				this.$validatorError.citysecond.error=false;
 			}
 			else{
 				this.$validatorError.citysecond.error=true;
 			}
 		},
 		validForm(){
			var validator=this.$validatorError;
			this.validator=this.$validatorError;
			this.$log("validator");
 			for(var key in validator){
 				if(validator[key].error==true){
 					this.visible=true;
 					this.content=validator[key].errorMsg;
 					this.isValid="校验不通过";
 					return;
 				}
 			}
 			this.isValid="校验通过";
 		}
 	}
}
</script>